/* eslint-disable @typescript-eslint/no-explicit-any */
import { VNode } from 'vue';
import { AllFormProps } from './store/editor'
export interface PropToForm {
    component: string;
    subComponent?: string;
    extraProps?: { [key: string]: unknown };
    text?: string;
    options?: { text: string | VNode; value: unknown }[];
    initalTransform?: (v: any) => any;
    afterTransform?: (v: any) => any;
    valueProp?: string;
    eventName?: string;
  }

export type PropsToForms = {
    [P in keyof AllFormProps]?: PropToForm;
};

const fontFamilyArr = [
    { text: '宋体', value: '"SimSun","STSong"' },
    { text: '黑体', value: '"SimHei","STHeiti"' },
    { text: '楷体', value: '"KaiTi","STKaiti"' },
    { text: '仿宋', value: '"FangSong","STFangsong"' },
];

const fontFamilyOptions = fontFamilyArr.map(font => {
    return {
        value: font.value,
        text: (<span style={{ fontFamily: font.value }}>{font.text}</span>) as VNode,
    };
});

const defaultHandler = {
    component: 'a-input',
    eventName: 'change',
    valueProp: 'value',
    intialTransform: (v: any) => v,
    afterTransform: (e: any) => e
  }
  const pxToNumberHandler: PropToForm = {
    component: 'a-input-number',
    initalTransform: (v: string) => v ? parseInt(v): 0,
    afterTransform: (e: number) => e ? `${e}px` : '',
  }
  
  export const mapPropsToForms: PropsToForms = {
    // textComponentProps
    text: {
      text: '文本',
      component: 'a-textarea',
      extraProps: { rows: 3 },
      afterTransform: (e: any) => e.target.value,
    },
    fontSize: {
      text: '字号',
      ...pxToNumberHandler
    },
    lineHeight: {
      text: '行高',
      component: 'a-slider',
      extraProps: { min: 0, max: 3, step: 0.1 },
      initalTransform: (v: string) => parseFloat(v),
      afterTransform: (e: number) => e.toString(),
    },
    textAlign: {
      component: 'a-radio-group',
      subComponent: 'a-radio-button',
      text: '对齐',
      options: [
        { value: 'left', text: '左' },
        { value: 'center', text: '中' },
        { value: 'right', text: '右' }
      ],
      afterTransform: (e: any) => {
        return e.target.value 
      },
    },
    fontFamily: {
      component: 'a-select',
      subComponent: 'a-select-option',
      text: '字体',
      options: [
        { value: '', text: '无' },
        ...fontFamilyOptions
      ]
    },
    fontWeight: {
      component: 'icon-switch',
      initalTransform: (v: string) => v === 'bold',
      afterTransform: (e: boolean) => e ? 'bold' : 'normal',
      valueProp: 'checked',
      extraProps: { iconName: 'BoldOutlined', tip: '加粗' }
    },
    fontStyle: {
      component: 'icon-switch',
      initalTransform: (v: string) => v === 'italic',
      afterTransform: (e: boolean) => e ? 'italic' : 'normal',
      valueProp: 'checked',
      extraProps: { iconName: 'ItalicOutlined', tip: '斜体' }
    },
    textDecoration: {
      component: 'icon-switch',
      initalTransform: (v: string) => v === 'underline',
      afterTransform: (e: boolean) => e ? 'underline' : 'none',
      valueProp: 'checked',
      extraProps: { iconName: 'UnderlineOutlined', tip: '下划线' }
    },
    color: {
      component: 'color-picker',
      text: '字体颜色'
    },
    backgroundColor: {
      component: 'color-picker',
      text: '背景颜色'
    },
    // imageComponentProps
    src: {
      component: 'image-processer'
    },
    // commonComponentProps - sizes
    width: {
      text: '宽度',
      ...pxToNumberHandler
    },
    height: {
      text: '高度',
      ...pxToNumberHandler
    },
    paddingLeft: {
      ...pxToNumberHandler,
      text: '左边距'
    },
    paddingRight: {
      ...pxToNumberHandler,
      text: '右边距'
    },
    paddingTop: {
      ...pxToNumberHandler,
      text: '上边距'
    },
    paddingBottom: {
      ...pxToNumberHandler,
      text: '下边距'
    },
    // commonComponentProps - border type
    borderStyle: {
      ...defaultHandler,
      component: 'a-select',
      subComponent: 'a-select-option',
      text: '边框类型',
      options: [
        { value: 'none', text: '无' },
        { value: 'solid', text: '实线' },
        { value: 'dashed', text: '破折线' },
        { value: 'dotted', text: '点状线' }
      ]
    },
    borderColor: {
      ...defaultHandler,
      component: 'color-picker',
      text: '边框颜色'
    },
    borderWidth: {
      ...pxToNumberHandler,
      component: 'a-slider',
      text: '边框宽度',
      extraProps: { min: 0, max: 20 }
    },
    borderRadius: {
      ...pxToNumberHandler,
      component: 'a-slider',
      text: '边框圆角',
      extraProps: { min: 0, max: 200 }
    },
    // commonComponentProps - opacity and boxShadow
    opacity: {
      component: 'a-slider',
      text: '透明度',
      valueProp: 'value',
      initalTransform: (v: string) => v ? parseFloat(v) * 100 : 100,
      afterTransform: (e: number) => (e / 100) + '',
      extraProps: { min: 0, max: 100, reverse: true }
    },
    boxShadow: {
      component: 'shadow-picker'
    },
    // commonComponentProps - positions
    left: {
      ...pxToNumberHandler,
      text: 'X轴坐标'
    },
    top: {
      ...pxToNumberHandler,
      text: 'Y轴坐标'
    },
    // commonComponentProps - actions and urls
    // actions
    actionType: {
      ...defaultHandler,
      component: 'a-select',
      subComponent: 'a-select-option',
      text: '点击',
      options: [
        { value: '', text: '无' },
        { value: 'to', text: '跳转到 URL' }
      ]
    },
    url: {
      ...defaultHandler,
      afterTransform: (e: any) => e.target.value,
      text: '链接'
    },
    backgroundImage: {
      ...defaultHandler,
      component: 'background-processer',
      initalTransform: (v: string) => {
        if (v) {
          const reg = /\(["'](.+)["']\)/g
          const matches = reg.exec(v)
          if (matches && matches.length > 1) {
            console.log(matches)
            return matches[1]
          } else {
            return ''
          }
        } else {
          return ''
        }
      },
      afterTransform: (e: string) => e ? `url('${e}')` : ''
    },
  }